<template>
  <section>
    <swiper :options="swiperOption" ref="banerSwiper">
      <!-- slides -->
      <swiper-slide v-for="item in banners" :key="item.id">
        <img :src="item.imgSrc" alt="">
      </swiper-slide>
      <div class="swiper-pagination banner-pag" slot="pagination"></div>
    </swiper>
    <div class="mui-segmented-control mh-segmented sub-control">
      <a class="mui-control-item" href="javascript:" @tap="handleExplore(1)"><span>搜索</span></a>
      <a class="mui-control-item" href="javascript:"  @tap="handleExplore(2)"><span>动态</span></a>
      <a class="mui-control-item mui-active" href="javascript:"  @tap="handleExplore(3)"><span>发现</span></a>
      <a class="mui-control-item" href="javascript:"  @tap="handleExplore(4)"><span>商城</span></a>
    </div>
    <div class="find-like flex-bt">
      <div class="peo-saw-m new" @tap="sawMe('谁看过我', 1)">
        <div class="peo-pic">
          <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=667941305,57453066&fm=26&gp=0.jpg" alt="">
        </div>
        <p class="peo-label">谁看过我</p>
      </div>

      <div class="peo-saw-m new" @tap="sawMe('谁喜欢我', 2)">
        <div class="peo-pic">
          <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=667941305,57453066&fm=26&gp=0.jpg" alt="">
        </div>
        <p class="peo-label">谁喜欢我</p>
      </div>

      <div class="peo-saw-m"  @tap="sawMe('我喜欢谁', 3)">
        <div class="peo-pic">
          <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=667941305,57453066&fm=26&gp=0.jpg" alt="">
        </div>
        <p class="peo-label">我喜欢谁</p>
      </div>

      <div class="peo-saw-m"  @tap="sawMe('相互喜欢', 4)">
        <div class="peo-pic">
          <img src="../../assets/images/ico/ic_e_like.png" alt="">
        </div>
        <p class="peo-label">相互喜欢</p>
      </div>
    </div>

    <div class="find-category">
      <div class="cater-item my-match" @tap="toMyMatch">
        <p class="cater-name">我的匹配</p>
        <p class="cater-desc">为您精确匹配良缘</p>
      </div>
      <div class="cater-item second-friend" @tap='toFriends'>
        <p class="cater-name">二度好友</p>
        <p class="cater-desc">查询通讯录好友</p>
      </div>
      <div class="cater-item member-cen" @click='toService'>
        <p class="cater-name">会员中心</p>
        <p class="cater-desc">为您精选各项服务</p>
      </div>
      <div class="cater-item match-service" @click='toMallMatch'>
        <p class="cater-name">相亲服务</p>
        <p class="cater-desc">一对一红娘专属服务</p>
      </div>
      <div class="cater-item my-note" @tap="toMyNote">
        <p class="cater-name">我的备注</p>
        <p class="cater-desc">已备注网友随时看</p>
      </div>
    </div>

    <tab-menu :activeTab="activeFootTab"> </tab-menu>
  </section>
</template>

<script>
  import TabMenu from '@/components/tab-menu/tab-menu'
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  export default {
    name: "explore-find",
    data () {
      return {
        activeFootTab: 3,
        showBack: false,
        swiperOption: {
          loop: true,
          centeredSlides: true,
          pagination: {
            el: '.swiper-pagination'
          }
        },
        banners: [
          {
            id: '1',
            imgSrc: 'https://yanxuan.nosdn.127.net/4e4806eb489e3dc09c46fcb847696e1c.jpg?imageView&quality=95&thumbnail=1090x310'
          },
          {
            id: '2',
            imgSrc: 'https://yanxuan.nosdn.127.net/56f76169f37f0911ead70e7690e5ad0b.jpg?imageView&quality=95&thumbnail=1090x310'
          }
        ]
      }
    },
    computed: {
      swiper() {
        return this.$refs.banerSwiper.swiper
      }
    },
    mounted () {
      this.swiper.slideTo(1, 1000, false)
    },
    methods: {
      toFriends(){
        this.$router.push({
          path: '/profile/friends'
        })
      },
      toMallMatch(){
        this.$router.push({
          path: '/explore/mall/match'
        })
      },
      toService(){
        this.$router.push({
          path: '/profile/service',
          query: {
            id: 1
          }
        })
      },
      handleExplore (i) {
        switch (i) {
          case 1 :
            this.$router.replace({
              path: '/explore/search'
            });
            break;
          case 2:
            this.$router.replace({
              path: '/explore/dynamic'
            });
            break;
          case 3:
            this.$router.replace({
              path: '/explore/find'
            });
            break;
          case 4:
            this.$router.replace({
              path: '/explore/mall'
            });
            break;
          default:
            this.$router.replace({
              path: '/explore/search'
            });
        }
      },
      sawMe (name, type) {
        this.$router.push({
          path: '/explore/find/saw',
          query: {
            name: name,
            type: type
          }
        })
      },
      toMyNote () {
        this.$router.push({
          path: '/explore/find/note'
        })
      },
      toMyMatch () {
        this.$router.push({
          path: '/explore/find/match'
        })
      }
    },
    components: {
      TabMenu,
      swiper,
      swiperSlide
    }
  }
</script>

<style lang="scss" scoped>
  .swiper-container {
    width: 100%;
    height: 100%;
    z-index: 9;
    .swiper-pagination-bullet-active {background: #de73a4;}
  }
  .sub-control {z-index: 9;}
  .swiper-slide {
    text-align: center;
    background: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .find-like {
    padding: 1rem 2.5rem;
    background-color: #fff;
    border-top: 1px solid #eee;
  }
  .peo-pic {
    width: 5rem;
    height: 5rem;
    overflow: hidden;
    &>img {
      width: 100%;
      border-radius: 100%;
    }
  }
  .peo-saw-m.new {
    position: relative;
    &:after {
      position: absolute;
      content: '';
      width: 1rem;
      height: 1rem;
      background-color: #e60012;
      border-radius: 100%;
      right: .4rem;
      top: -.2rem;
    }
  }
  .peo-label {
    margin-top: .5rem;
    font-size: 1.2rem;
    color: #333;
    text-align: center;
  }
  .find-category {
    margin-top: 1rem;
    padding: 1px 0;
    background-color: #fff;
  }
  .cater-item {
    padding: 2rem;
    margin: 1.5rem;
    border-radius: .5rem;
    p {color: #fff;}
    .cater-name {font-size: 1.5rem;margin-bottom: .2rem;}
    .cater-desc {font-size: 1.2rem;}
    &.my-match {
      box-shadow: .1rem .2rem .07rem rgba(255,173,1,.3);
      background: #ffad01 url("../../assets/images/ico/ic_e_match.png") no-repeat 101% -1.6rem;
      background-size: 5.5rem 5.5rem;
    }
    &.second-friend {
      box-shadow: .1rem .2rem .07rem rgba(52,184,127,.3);
      background: #34b87f url("../../assets/images/ico/ic_e_friends.png") no-repeat 101% -1.6rem;
      background-size: 6rem 5.5rem;
    }
    &.member-cen {
      box-shadow: .1rem .2rem .07rem rgba(242,108,96,.3);
      background: #f26c60 url("../../assets/images/ico/ic_e_vip.png") no-repeat 101% -1.2rem;
      background-size: 5.5rem 5rem;
    }
    &.match-service {
      box-shadow: .1rem .2rem .07rem rgba(58,171,218,.3);
      background: #3aabda url("../../assets/images/ico/ic_e_maservice.png") no-repeat 101% -1.4rem;
      background-size: 6rem 6rem;
    }
    &.my-note {
      box-shadow: .1rem .2rem .07rem rgba(235,83,127,.3);
      background: #eb537f url("../../assets/images/ico/ic_e_mynote.png") no-repeat 101% -1.4rem;
      background-size: 5rem 5.5rem;
    }
  }
</style>
